<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 教务管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background-color: #4285f4;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .nav-title {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .nav-menu a:hover, .nav-menu a.active {
            background-color: rgba(255,255,255,0.2);
        }
        
        .nav-user {
            color: #e3f2fd;
        }
        
        /* 主要内容区域 */
        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .page-header {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 28px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .page-desc {
            color: #666;
            font-size: 16px;
        }
        
        /* 操作区域 */
        .action-bar {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .search-input {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            width: 200px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #4285f4, #34a853);
            color: white;
            box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c82333;
        }
        
        /* 数据表格 */
        .data-container {
            background: rgba(255,255,255,0.95);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .table-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        .role-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .role-admin { background: #dc3545; color: white; }
        .role-teacher { background: #28a745; color: white; }
        .role-student { background: #007bff; color: white; }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-active { background: #d4edda; color: #155724; }
        .status-inactive { background: #f8d7da; color: #721c24; }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #999;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-menu {
                gap: 15px;
            }
            
            .action-bar {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-input {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-title">教务管理系统</div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="student.html">学生管理</a></li>
                <li><a href="attendance.html">考勤管理</a></li>
                <li><a href="user.html" class="active">用户管理</a></li>
            </ul>
            <div class="nav-user">admin ▼</div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">用户管理</h1>
            <p class="page-desc">管理系统用户，包括用户信息和权限设置</p>
        </div>

        <!-- 操作栏 -->
        <div class="action-bar">
            <input type="text" id="searchInput" class="search-input" placeholder="搜索用户名或姓名...">
            <button class="btn btn-primary" onclick="searchUsers()">搜索</button>
            <button class="btn btn-secondary" onclick="loadUsers()">刷新</button>
            <button class="btn btn-primary" onclick="addUser()">添加用户</button>
        </div>

        <!-- 数据表格 -->
        <div class="data-container">
            <div class="table-header">用户列表</div>
            <div class="table-container">
                <table id="userTable">
                    <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>角色</th>
                            <th>邮箱</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>最后登录</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        <!-- 示例数据 -->
                        <tr>
                            <td>1</td>
                            <td>admin</td>
                            <td>系统管理员</td>
                            <td><span class="role-badge role-admin">管理员</span></td>
                            <td>admin@school.com</td>
                            <td><span class="status-badge status-active">正常</span></td>
                            <td>2024-01-01</td>
                            <td>2024-01-15 09:30</td>
                            <td>
                                <button class="btn btn-primary" style="padding: 5px 10px; margin-right: 5px;" onclick="editUser(1)">编辑</button>
                                <button class="btn btn-secondary" style="padding: 5px 10px; margin-right: 5px;" onclick="resetPassword(1)">重置密码</button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>teacher001</td>
                            <td>张老师</td>
                            <td><span class="role-badge role-teacher">教师</span></td>
                            <td>zhang@school.com</td>
                            <td><span class="status-badge status-active">正常</span></td>
                            <td>2024-01-02</td>
                            <td>2024-01-15 08:45</td>
                            <td>
                                <button class="btn btn-primary" style="padding: 5px 10px; margin-right: 5px;" onclick="editUser(2)">编辑</button>
                                <button class="btn btn-secondary" style="padding: 5px 10px; margin-right: 5px;" onclick="resetPassword(2)">重置密码</button>
                                <button class="btn btn-danger" style="padding: 5px 10px;" onclick="disableUser(2)">禁用</button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>teacher002</td>
                            <td>李老师</td>
                            <td><span class="role-badge role-teacher">教师</span></td>
                            <td>li@school.com</td>
                            <td><span class="status-badge status-active">正常</span></td>
                            <td>2024-01-03</td>
                            <td>2024-01-14 16:20</td>
                            <td>
                                <button class="btn btn-primary" style="padding: 5px 10px; margin-right: 5px;" onclick="editUser(3)">编辑</button>
                                <button class="btn btn-secondary" style="padding: 5px 10px; margin-right: 5px;" onclick="resetPassword(3)">重置密码</button>
                                <button class="btn btn-danger" style="padding: 5px 10px;" onclick="disableUser(3)">禁用</button>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>student001</td>
                            <td>王同学</td>
                            <td><span class="role-badge role-student">学生</span></td>
                            <td>wang@student.com</td>
                            <td><span class="status-badge status-inactive">禁用</span></td>
                            <td>2024-01-05</td>
                            <td>2024-01-10 14:30</td>
                            <td>
                                <button class="btn btn-primary" style="padding: 5px 10px; margin-right: 5px;" onclick="editUser(4)">编辑</button>
                                <button class="btn btn-secondary" style="padding: 5px 10px; margin-right: 5px;" onclick="resetPassword(4)">重置密码</button>
                                <button class="btn btn-primary" style="padding: 5px 10px;" onclick="enableUser(4)">启用</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 页面加载时获取用户数据
        document.addEventListener('DOMContentLoaded', function() {
            // 这里可以调用loadUsers()来加载真实数据
            console.log('用户管理页面已加载');
        });
        
        // 加载用户数据
        function loadUsers() {
            console.log('刷新用户列表');
            // 这里应该调用后端API获取用户数据
            alert('刷新功能开发中...');
        }
        
        // 搜索用户
        function searchUsers() {
            const searchTerm = document.getElementById('searchInput').value.trim();
            console.log('搜索用户:', searchTerm);
            alert('搜索功能开发中...');
        }
        
        // 添加用户
        function addUser() {
            alert('添加用户功能开发中...');
        }
        
        // 编辑用户
        function editUser(userId) {
            alert(`编辑用户功能开发中... 用户ID: ${userId}`);
        }
        
        // 重置密码
        function resetPassword(userId) {
            if (confirm('确定要重置该用户的密码吗？')) {
                alert(`重置密码功能开发中... 用户ID: ${userId}`);
            }
        }
        
        // 禁用用户
        function disableUser(userId) {
            if (confirm('确定要禁用该用户吗？')) {
                alert(`禁用用户功能开发中... 用户ID: ${userId}`);
            }
        }
        
        // 启用用户
        function enableUser(userId) {
            if (confirm('确定要启用该用户吗？')) {
                alert(`启用用户功能开发中... 用户ID: ${userId}`);
            }
        }
        
        // 回车搜索
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchUsers();
            }
        });
    </script>
</body>
</html>
